<keira-top-bar [handler]="handlerService"></keira-top-bar>

<div class="container-fluid">
  <span *ngIf="editorService.loading">Loading...</span>

  <div *ngIf="editorService.form && !!editorService.loadedEntityId && !editorService.loading">
    <div class="content-block">
      <keira-query-output
        [docUrl]="docUrl"
        [editorService]="editorService"
        (executeQuery)="editorService.save($event)"
      ></keira-query-output>
    </div>

    <div class="content-block">
      <form [formGroup]="editorService.form" class="form-group edit-form">
        <div class="row">
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
            <label class="control-label" for="ItemId">
              <keira-icon [itemId]="editorService.form.controls.ItemId.value"></keira-icon>
              ItemId
            </label>
            <keira-item-selector-btn [control]="editorService.form.controls.ItemId" [config]="{ name: 'ItemId' }"></keira-item-selector-btn>
            <input [formControlName]="'ItemId'" id="ItemId" type="number" class="form-control form-control-sm" />
          </div>
          <div class="form-group col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
            <label class="control-label" for="Idx">Idx</label>
            <input [formControlName]="'Idx'" id="Idx" type="number" class="form-control form-control-sm" />
          </div>

          <div class="col-12 form-error" [hidden]="editorService.isFormIdUnique()">
            <i class="fas fa-exclamation-triangle"></i>
            The <strong>{{ editorService.entitySecondIdField }}</strong> must be unique.
          </div>
        </div>
      </form>

      <div class="row">
        <div class="col-12">
          <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>

          <ngx-datatable
            id="editor-table"
            class="bootstrap table table-striped text-center datatable-select datatable-icon-list"
            [rows]="editorService.newRows"
            [headerHeight]="DTCFG.headerHeight"
            [footerHeight]="DTCFG.footerHeight"
            [columnMode]="DTCFG.columnMode"
            [rowHeight]="DTCFG.rowHeightWithIcon"
            [selectionType]="DTCFG.selectionType"
            (select)="editorService.onRowSelection($event)"
            (keydown.delete)="editorService.deleteSelectedRow()"
          >
            <ngx-datatable-column [minWidth]="30" [maxWidth]="30" [sortable]="false">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <i [hidden]="!editorService.isRowSelected(row)" class="fas fa-chevron-right"></i>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [minWidth]="42" [maxWidth]="42" [sortable]="false">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <keira-icon [itemId]="row.Item"></keira-icon>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Idx" prop="Idx" [minWidth]="80" [maxWidth]="120"></ngx-datatable-column>
            <ngx-datatable-column name="ItemId" prop="ItemId" [maxWidth]="150"></ngx-datatable-column>
            <ngx-datatable-column name="Name" [minWidth]="200">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ editorService.queryService.getItemNameById(row.ItemId) | async }}
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </div>
      </div>
    </div>
  </div>
</div>
